<!DOCTYPE html>
<html lang="zh-CN" xmlns:th="http://www.thymeleaf.org">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <meta name="description" content="">
  <meta name="author" content="">
  <base th:href="@{/}">
  <link rel="stylesheet" href="bootstrap/css/bootstrap.min.css">
  <link rel="stylesheet" href="css/font-awesome.min.css">
  <link rel="stylesheet" href="css/theme.css">
  <style>
    #footer {
      padding: 15px 0;
      background: #fff;
      border-top: 1px solid #ddd;
      text-align: center;
    }
    #topcontrol {
      color: #fff;
      z-index: 99;
      width: 30px;
      height: 30px;
      font-size: 20px;
      background: #222;
      position: relative;
      right: 14px !important;
      bottom: 11px !important;
      border-radius: 3px !important;
    }

    #topcontrol:after {
      /*top: -2px;*/
      left: 8.5px;
      content: "\f106";
      position: absolute;
      text-align: center;
      font-family: FontAwesome;
    }

    #topcontrol:hover {
      color: #fff;
      background: #18ba9b;
      -webkit-transition: all 0.3s ease-in-out;
      -moz-transition: all 0.3s ease-in-out;
      -o-transition: all 0.3s ease-in-out;
      transition: all 0.3s ease-in-out;
    }

    .label-type, .label-status, .label-order {
      background-color: #fff;
      color: #f60;
      padding : 5px;
      border: 1px #f60 solid;
    }
    #typeList  :not(:first-child) {
      margin-top:20px;
    }
    .label-text {
      margin:0 10px;
    }
    .panel {
      border-radius:0;
    }
    h3.break {
      font-size:16px;
      display: block;
      white-space: nowrap;
      word-wrap: normal;
      overflow: hidden;
      text-overflow: ellipsis;
    }
    h3.break>a {
      text-decoration:none;
    }
  </style>
</head>
<body>
<div class="navbar-wrapper">
  <div class="container">
    <nav class="navbar navbar-inverse navbar-fixed-top" role="navigation">
      <div class="container">
        <div class="navbar-header">
          <a class="navbar-brand" href="index.html" style="font-size:32px;" th:href="@{http://localhost}">爱众筹-创意产品众筹平台</a>
        </div>
        <div id="navbar" class="navbar-collapse collapse" style="float:right;">
          <ul class="nav navbar-nav navbar-right">
            <li th:if="${#strings.isEmpty(session.loginMember)}"><a>请先登录 </a></li>
            <li th:if="${not #strings.isEmpty(session.loginMember)}">
              <ul class="nav navbar-nav">
                <li class="dropdown">
                  <a href="#" class="dropdown-toggle" data-toggle="dropdown"><i class="glyphicon glyphicon-user"></i> [[${session.loginMember.userName}]]<span class="caret"></span></a>
                  <ul class="dropdown-menu" role="menu">
                    <li><a href="member.html" th:href="@{/auth/member/to/center/page}"><i class="glyphicon glyphicon-scale"></i> 会员中心</a></li>
                    <li><a href="#"><i class="glyphicon glyphicon-comment"></i> 消息</a></li>
                    <li class="divider"></li>
                    <li><a href="index.html" th:href="@{/auth/member/logout}"><i class="glyphicon glyphicon-off"></i> 退出系统</a></li>
                  </ul>
                </li>
              </ul>
            </li>
            <li th:if="${#strings.isEmpty(session.loginMember)}"><a href="login.html" th:href="@{/auth/member/to/login/page}">登录</a></li>
            <li><a href="reg.html" th:href="@{/auth/member/to/register/page}">注册</a></li>
            <li><a>|</a></li>
            <li><a href="localhost:8089/admin/to/login/page.html">管理员入口</a></li>
          </ul>
        </div>
      </div>
    </nav>
  </div>
</div>

<div class="container theme-showcase" role="main">

  <div class="container">
    <div class="row clearfix">
      <div class="col-md-12 column">
        <nav class="navbar navbar-default" role="navigation">
          <div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
            <ul class="nav navbar-nav">
              <li>
                <a rel="nofollow" href="index.html"><i class="glyphicon glyphicon-home"></i> 众筹首页</a>
              </li>
              <li class="active">
                <a rel="nofollow" href="javascript:;"><i class="glyphicon glyphicon-th-large"></i> 项目总览</a>
              </li>
              <li>
                <a rel="nofollow" href="start.html"><i class="glyphicon glyphicon-edit"></i> 发起众筹</a>
              </li>
              <li>
                <a rel="nofollow" href="minecrowdfunding.html"><i class="glyphicon glyphicon-user"></i> 我的众筹</a>
              </li>
            </ul>
          </div>
        </nav>
      </div>
    </div>
  </div>

  <div class="container">
    <div class="row clearfix">
      <div class="col-md-12 column">
        <div class="panel panel-default">
          <div class="panel-body">
            <ul id="typeList" style="list-style: none;">
              <li>
                分类：<span class="label-type actvie">全部</span> <span class="label-text">科技</span> <span class="label-text">设计</span> <span class="label-text">公益</span> <span class="label-text">农业</span> <span class="label-text">文化</span>
              </li>
              <li>
                状态：<span class="label-status actvie">全部</span> <span class="label-text">即将开始</span> <span class="label-text">众筹中</span> <span class="label-text">众筹成功</span>
              </li>
              <li>
                排序：<span class="label-order actvie">综合排序</span> <span class="label-text">最新上线</span> <span class="label-text">金额最多</span> <span class="label-text">支持最多</span>
              </li>
            </ul>
          </div>
          <div class="panel-footer" style="height:50px;padding:0;">
            <div style="float:left;padding:15px;">
              共216个众筹项目
            </div>
            <div style="float:right;">
              <form class="navbar-form navbar-left" role="search">
                <div class="form-group">
                  <input type="text" class="form-control" placeholder="请输入搜索内容">
                </div>
                <button type="submit" class="btn btn-default"><i class="glyphicon glyphicon-search"></i> 搜索</button>
              </form>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>

  <div class="container">
    <div class="row clearfix">
      <div class="col-md-12 column">
        <div class="row">
          <div th:if="${#strings.isEmpty(all_project)}" class="col-md-3">没有加载任何信息</div>
          <div th:if="${not #strings.isEmpty(all_project)}">
            <div th:each="project : ${all_project}" class="col-md-3">
              <div class="thumbnail">
                <a th:href="'http://localhost/project/get/detail/project/'+${project.id}">
                <img alt="300x200" th:src="${project.headerPicturePath}+'?x-oss-process=image/resize,m_fixed,h_246,w_256'"
                     src="img/product-1.jpg" height="500px"/>
                <div class="caption">
                  <h3 class="break">
                    <a href="project.html"
                       th:href="'http://localhost/project/get/detail/project/'+${project.id}"
                       th:text="${project.projectName}">活性富氢净水直饮机</a>
                  </h3>
                  <p>
                  <div style="float:left;"><i class="glyphicon glyphicon-screenshot"
                                              title="目标金额"></i> $<span
                          th:text="${project.money}"> 20,000 </span></div>
                  <div style="float:right;"><i title="截至日期"
                                               class="glyphicon glyphicon-calendar"></i>
                    <span th:text="${project.deploydate}">2017-20-20</span>
                  </div>
                  </p>
                  <br>
                  <div class="progress" style="margin-bottom: 4px;">
                    <div class="progress-bar progress-bar-success" role="progressbar"
                         th:aria-valuenow="(${project.supportmoney} / ${project.money})*100" aria-valuenow="40" aria-valuemin="0" aria-valuemax="100"
                         th:style="'width: '+(${project.supportmoney} / ${project.money})*100+'%'" style="width: 40%">
                      <span th:text="(${project.supportmoney} / ${project.money})*100+'% '">40% </span>
                    </div>
                  </div>
                  <div><span style="float:right;"><i
                          class="glyphicon glyphicon-star-empty"></i></span> <span><i
                          class="glyphicon glyphicon-user" title="支持人数"></i> <span th:text="${project.supporter}">12345</span></span>
                  </div>
                </div>
                </a>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>

  <div class="container">
    <div class="row clearfix">
      <div class="col-md-12 column" style="text-align:center">
        <ul class="pagination">
          <li>
            <a rel="nofollow" href="#">上一页</a>
          </li>
          <li>
            <a rel="nofollow" href="#">1</a>
          </li>
          <li>
            <a rel="nofollow" href="#">2</a>
          </li>
          <li>
            <a rel="nofollow" href="#">3</a>
          </li>
          <li>
            <a rel="nofollow" href="#">4</a>
          </li>
          <li>
            <a rel="nofollow" href="#">5</a>
          </li>
          <li>
            <a rel="nofollow" href="#">下一页</a>
          </li>
        </ul>
      </div>
    </div>
  </div>

  <div class="container" style="margin-top:20px;">
    <!-- FOOTER -->
    <div class="container">
      <div class="row clearfix">
        <div class="col-md-12 column">
          <div id="footer">
            <div class="footerNav">
              <a rel="nofollow">关于我们</a> | <a rel="nofollow"
            >服务条款</a>
              | <a rel="nofollow">免责声明</a> | <a rel="nofollow"
            >网站地图</a>
              | <a rel="nofollow">联系我们</a>
            </div>
            <div class="copyRight">
              Copyright ?jj 版权所有
            </div>
          </div>

        </div>
      </div>
    </div>
  </div>

</div> <!-- /container -->
<script src="jquery/jquery-2.1.1.min.js"></script>
<script src="bootstrap/js/bootstrap.min.js"></script>
<script src="script/docs.min.js"></script>
<script src="script/back-to-top.js"></script>
<script>
  $('#myTab a').click(function (e) {
    e.preventDefault()
    $(this).tab('show')
  })
</script>
</body>
</html>